Imágenes extra grandes en Blogger

Leyendo el título cualquiera diría que Blogger está dando pasos agigantados, y es cierto.Pero un día da dos pasos adelante y al otro retrocede tres.

Cuando añadió el formulario incrustado nos sorprendió gratamente a todos, se veía la intención de mejorar las carencias tan necesarias. Paciencia, nos decíamos, ya se dieron cuenta que estamos aquí.

Lo último ha sido algo nuevo, algo inútil y algo que no funciona.

Podemos ver lo nuevo accediendo desde Blogger in draft en el editor de entradas hay una nueva opción cuando subimos una imagen, antes el tamaño mayor era de 400. Ahora, podemos añadir imágenes "Extra grandes" de 640 ojito con ese tamaño que no quiere decir que todos podamos mostrar ese tamaño de imágenes.

¿Por qué? porque si nuestro espacio para las entradas (main-wrapper) es menor de 640px las imágenes tomarán el espacio que les falta y desplazarán aquello que tengan más cercano, la sidebar o el propio contenido de las entradas.

Lo inutil es este aviso que podemos ver accediendo también por Blogger in draft si, ya sé que por ese medio tenemos acceso a las cosas que están en fase experimental ¿sólo lo vemos los usuarios? porque lleva allí más de una semana y nadie hace nada al respecto.

Consultado con J.Miur me aclara que está relacionado con la la Ubicación.

Plantilla de diseño/Entradas del blog/Editar/Ubicación

Pero no se cansen que aunque no esté marcado y eliminen la parte correspondiente a la plantilla seguirá saliendo.

Mucha euforia, bombo y platillo, no dábamos crédito al avatar de comentarios, y en cierto modo no es extraño porque no hay que dar crédito a algo que ha sido un visto y no visto.

El "estamos solucionado el problema" dura ya dos semanas ¿o quizás más?

Ese icono rojo con la ramita blanca soy yo

Three Styles

the Iconfactory

artdesigner

Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.

Home Blog About Contact

Estilos CSS antes de ]]></b:skin>

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

En HTML:

<div id="list8">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

REFERENCIA:Punto geek

k_nelita me ha pedido que explique la forma de añadir un sistema de publicidad creado con esas pequeñas imágenes de 16x16 que conocemos por favicon.

Los favicones están incluidos en una tabla.

<div class="side-favicon ">

<div class="favicon">

<table fcellpadding="0" align="center">

<tbody>

<tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<tr>

</tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

</td></tr>

</tbody>

</table>

</div></div>

La vamos a incluir en un gadget de HTML y las filas de la tabla dependerán de la cantidad de líneas de favicones que deseamos añadir.

En la tabla del ejemplo añadí dos líneas para tres favicones en cada línea, pero podemos aumentar la cantidad de favicones dependiendo del ancho de la sidebar.
El código para cada favicón lo añadimos entre <td> y <td>

Cuando los favicones cubren una línea pasaremos a la línea siguiente, las etiquetas <tr> y </tr> serán las encargadas de producir el salto de línea..

El favicon es un enlace que nos llevará a la url que le indiquemos.

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Le añadimos target="_blank" para que abra en ventana nueva, también le podemos añadir la etiqueta rel="nofollow" para que Google no tenga en cuenta esos enlaces, eso ya dependerá de cada uno.

<a href="ur-pagina" target="_blank" rel="nofollow" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Guardamos los cambios y añadimos los estilos, nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos:

.favicon {

padding:2px;

text-align:center;

}

.favicon a img {

background-color: #fff;

border:1px solid #ccc;

padding:2px 2px;width:16px

}

div.side-favicon {

background:#FFFF;

border:1px dashed #C0C0C0;

margin:0 0 20px;

padding:4px 4px;

}

Con "background" podemos cambiar el color de fondo, el tipo de borde y color en "border"

Oloman sonriente (y no es para menos) recoge uno de sus premios

Tres premios, no uno, ni dos, sino TRES son los premios que nuestro amigo Oloman ha conseguido.

Mejor blog 2009: Diploma acreditativo, estatuilla, 3.000 euros y una columna del periódico 20 minutos de papel.

Mejor blog de Ciencia y Tecnología: Diploma acreditativo y estatuilla.

Los premiados de la noche

FELICIDADES Oloman, ahora ya no tienes esa ventaja que decías tener porque te voy a reconocer cualquier día por la calle FELICIDADES también al resto de los galardonados.

Fotografías de Jorge París, fotógrafo oficial del evento, obtenidas en El blog de blogs de Pablo Fernández.

Abu Farhan a añadido al widget inicial de entradas con miniatura un afecto animado creado por las API de Google y jQuery eso hace que el efecto sea rápido y a la vez resulta muy atractivo y llamativo pero quiere decir también que si tenemos en nuestro blog otra librería pueden crearse conflictos entre ellas.

En Plantilla de diseño editamos un nuevo gadget de HTML.

En su interior añadimos el código que podemos copiar desde aquí, una vez añadido buscamos donde dice:

home_page = "http://www.raudhatulmuhibbin.org/";

ahí sustituimos la url marcada en negrita por la de nuestro blog.
Guardamos los cambios y lo podemos ver funcionado en segundos.

La personalización no varía de cualquier widget exceptuando que podemos personalizar los colores, fuente y fondo del widget
.

boxwidth = 255; Ancho del widget.	cellspacing = 6; Velocidad del efecto.	borderColor = "#232c35"; Color del borde.
bgTD = "#0000"; Color de fondo del widget.	imgwidth = 50; Ancho de la miniatura de imagen.	thumbheight = 70; Alto de la miniatura.
fntsize = 12; Tamaño de fuente de los título.	acolor = "#666"; Color del título de entrada.	aBold = true; El título, con false eliminamos el texto negrita.
text = "comments"; El texto de comentarios.	showPostDate = true; Fecha de los post. Si ponemos False no se muestra la fecha.	summaryPost = 40 ; Número de carácteres del resumen.
summaryFontsize = 10; Tamaño de texto del resumen.	summaryColor = "#666"; Color de texto del resumen.	numposts = 10; Es el número de post que veremos.

Casi todos tenemos el enlace a Twitter en nuestra sidebar, pero hay otra forma de añadirlo para que siempre esté visible, la idea es la misma de la imagen fija al final del blog. En esa imagen añadimos el efecto deslizante porque se trataba de un efecto pero al tratarse de un simple enlace la podemos añadir sin efecto fijándola en un punto en concreto.

En un gadget de HTML añadimos:

<div id="twitterfijo">

<a style="display:scroll;position:fixed;bottom:345px;right:0px;" href="url-twitter">

<img src="url-imagen"/></a>

</div>

Si en lugar de añadirlo en un gadget preferimos añadirlo a la plantilla, podemos hacerlo justo antes de:
<div id='main-wrapper'>

La altura la escogemos en bottom:345px y la anchura right:0px
Hay que intentar que la imagen quede pegada al blog y no sobre el blog, de lo contrario es posible que se "esconda" detrás de algún bloque que tengamos añadido.
Puede verse funcionando en este ejemplo.
Se puede añadir cualquier otra imagen  y enlazar cualquier otro sitio que no sea Twitter.

En Todo Twitter podéis encontrar gran surtido de iconos y lo último en herramientas y utilidades para Twitter.

Con frecuencia nos llevamos una desilusión cuando visualizamos nuestro blog con distinto navegador. Luego viene la pregunta ¿Por qué se ve tan mal con Explorer si en Firefox se ve estupendo?

Que ningún usuario de Explorer se ofenda pero es así, se pueden contar las veces que me comentaron lo contrario, no vamos a hacer un debate sobre navegadores, ni una encuesta tampoco.

Lo que puede ser estupendo para unos es desastroso para otros y viceversa. Si usas Explorer y eres de los que piensan que es más rápido y seguro estupendo, sigue usándolo. Yo soy usuario de Firefox y me gusta, no pienso cambiar a un navegador que no refleja los cambios en mi blog tal y como los hago.

Hay opiniones variadas y todas tienen sus argumentos así que este es el mío, aclaro esto porque pienso que cada uno puede usar el que mejor le convenga respetando siempre la decisión y opinión de los demás.

Los usuarios de Firefox tenemos a nuestro alcance una extensión llamada IE Tab, la extensión agrega un botón en la barra de estado para cambiar el motor de renderización de la página que estamos visitando, nos permite de esta forma visualizar la página con Explorer y con un click regresar a Firefox.

De todas las extensiones pienso que es la más útil cuando hacemos cambios en el blog, ya no es necesario cambiar de un navegador a otro cerrando y abriendo ventanas.

Si eres de los que espera al día siguiente para ver su blog desde la oficina también debes saber que puedes tener Explorer instalado en tu PC y al mismo tiempo instalarte Firefox, de esta forma los puedes usar simultáneamente o mejor aún con la extensión IE Tab.

Parece que últimamente todos nos pusimos de acuerdo en preguntar de qué forma se consigue el efecto deslizante en los gadgets de la sidebar, en concreto el de Directorios. Así que vamos a explicarlo y los interesados ya pueden ponerse manos a la obra.

El efecto deslizante se consigue con las API de Google. El API de bibliotecas AJAX carga las bibliotecas JavaScript de software libre más populares entre ellas Prototype y Scriptaculous, eso nos evita buscar alojamientos externos y su funcionamiento es mucho más rápido.

Vamos a necesitar Prototype y Acriptaculous y las añadiríamos justo antes de </head> lo siguiente:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Con anterioridad lo añadimos en los siguientes ejemplos (si ya lo tuviéramos no es necesario volver a añadirlo)

Ir a inicio con efecto deslizante
"Imagen multiusos"
Subir y bajar con efecto deslizante
Efecto deslizante en los archivos de la sidebar

Para crear el efecto deslizante en los directorios o cualquier otro gadget lo que haremos será añadir un título al gadget para localizarlo con más facilidad.

En plantilla de Edición de HTML los gadgets se muestran como widgets más o menos así:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'/>

<b:widget otro gadget/>

<b:widget otro gadget/>

<b:widget otro gadget/>

</b:section>

</div>

Si marcamos para expandir la plantilla veremos que a cada widget le preceden unas líneas, en ellas veremos la etiqueta <data:title/> es la que genera el título del gadget.

Añadiremos Effect.toggle de Scriptaculous que nos permite mostrar y ocultar con distintos efectos cualquier contenido.

En nuestro código añadiremos lo marcado en negrita:

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'>

<b:includable id='main'>

<a href='#' onclick='Effect.toggle(&quot;Directorios&quot;,&quot; appear &quot;); return false'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'>[+/-]<data:title/></h2>

</b:if>

</a><div align='center' id='Directorios' style='display: none;'>

<div class='widget-content'>

<data:content/>

</div>
</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Debemos tener en cuenta que cada id debe ser único, si ya tenemos un id llamado Directorios no podemos crear otro con el mismo nombre.

El título, hace las veces de enlace, no hay problema si no deseamos añadir [+/-]porque seguirá funcionando. Si preferimos sustituirlo por una imagen es conveniente sea tipo icono para que el tamaño no se vea desproporcionado.

<img src="url-imagen"/>

También podemos situarlo a la derecha del título, es decir a la derecha de <data:title/>

Rosa explicó en su momento la forma de añadir el efecto slide en cualquier gadget incluidas las etiquetas.

Visitando a J.Miur podemos ver en sus ejemplos los distintos efectos que podemos añadir appear, slide o blind .

appear es el que viene definido en los pasos que seguimos anteriormente si deseamos cualquier otro simplemente debemos sustituir el nombre del efecto que en el código está marcado con fondo azul, como ejemplo sería algo así:

DEMO con appear

Tengo la sensación que el fin de semana se presenta largo, el avatar de los comentarios no está funcionando. Por lo pronto yo recomendaría no tocar nada referente al avatar, a lo mejor hasta consiguen solucionarlo.

Por otra parte Fileden sitio donde algunos de nosotros decidimos alojar nuestros archivos está de mantenimiento, un mantenimiento que dura ya dos días.He optado por sustituir la url de los archivos por los que tenía en otro alojamiento, aún así si veis algo que no funciona o algún archivo que no podéis descargar me lo podéis comunicar que inmediatamente los sustituiré por otro.
Por esto y por lo que pueda surgir, paciencia...

Hace unos días añadíamos el sistema de etiquetas relacionadas con miniaturas de imagen, más conocidas por Thumbnails.

El autor de ese widget y de este que hoy veremos es Aneesh de Blogger Widgets, en su entrada nos proporciona el widget con esta imagen y podemos añadirlo con un simple click. El widget se adapta a los colores del blog, es decir adquiere los colores que tengamos determinados respecto a los enlaces.

También ofrece las explicaciones para añadirlo manualmente y de esta forma poder acceder a los estilos, en este caso haremos lo siguiente.
Nos situamos justo antes de ]]></b:skin> y añadimos los estilos:

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

No te olvides que, cuando marcamos

para expandir la plantilla

los errores

nos juegan
malas pasadas

¿tienes ya una copia?

Seguidamente buscamos </ Body> y justo antes añadiremos:

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>

</b:if>

<!--Page Navigation Ends-->

var pageCount=5; Determina la cantidad de post a mostrar.
var displayPageNum=5; Aquí determina la cantidad de números adicionales que se mostrarán

var upPageWord ='Previous'; El texto Previus (Anterior)
var downPageWord ='Next'; El texto Next sería (Siguiente)

Una vez realizados estos cambios nos encontraremos con un problema, Blogger muestra 20 post por página y tenemos que reducir esta cantidad para que la paginación sea variable.Para solucionarlo nos situamos en plantilla Ediciónde HTML y marcamos para expandir la plantilla.

Buscamos <a expr:href='data:label.url' rel='tag'> y lo sustituimos por

<a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'>

en max-results= 5 será el número de post en cada página.

Si fuera el caso que estamos usando el widget de nube de etiquetas de phydeaux3, también debemos buscar: a.href = '/search/label/'+encodeURIComponent(t);
y sustituirlo por:

a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';

REFERENCIA:Bietemplates

Format: 1 eps/svg, 1 png
Resolution: png @ 550dpi (7639×7639)
Size: 9,4 Mb
Vectors + PNG
Descarga: DragonArtz Designs

Añadir un menú en el header es algo sencillo, pensé que personalizarlo con la herramienta de fuentes y colores lo haría aún más sencillo y así fue.

A petición de Javi vamos a añadir a ese menú un traductor con imagen de banderitas.

Primeramente añadimos el menú siguiendo los pasos de esta entrada, una vez lo tenemos añadimos el traductor.

Buscamos en plantilla Edición de HTML el lugar de los enlaces y añadimos lo que está en negrita.
ver código

<div class="menu">

<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>

<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

</ul>

</div>

Para enlazar las imágenes nos dirigimos a Google traductor y allí introducimos la url de nuestro blog, escogemos por ejemplo español-inglés, marcamos en Traducir y copiamos la url de la barra del navegador. Si tenemos problemas con la url porque es muy extensa podemos acortarla en http://liurl.com/

Esa url es lo que pegaremos en lugar de url-página--traductor1 lo haremos así con cada uno de los idiomas.

Añadimos ahora el buscador justo después del traductor.Lo haremos de la siguiente forma:
ver código

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>

<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>

</form></li>

Donde gemablog-.blogspot.com/ lo sustituimos por la url de vuestro blog (sin http)
Con el traductor y el buscador nos resultaría más o menos así:

ver código

<div class="menu">

<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>

<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>

<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>

</form></li>

</ul>

</div>

Para que el buscador luzca le añadimos unos estilos donde incluiremos una imagen de fondo, los añadimos justo antes de ]]></b:skin>

#b-query {

background:transparent url(http://1.bp.blogspot.com/_q4j3j-JA2ro/Ss5n3W3TLxI/AAAAAAAAL-E/euOu4R2WC4k/s320/search.gif) no-repeat scroll 0 0;border:medium none;

color:#000;font-family:Georgia,serif;font-size:15px;

width:210px;

float:right;

margin-right:16px;

margin-bottom:10px;

}

Al añadir una imagen, la de este buscador o cualquier otro es posible que tengamos que dar más altura al menú en:

.menu {

width:660px;

height:27px; /* Probar con más altura */

background: $menubgColor;

border: 1px solid $menumainBorderColor;

}

Descargaarchivo ZIP

Próximamente Seat lanza una campaña publicitaria, como muchas campañas el objetivo es dar a conocer un producto, en este caso se trata de el nuevo Altea XL  para ello ha decidido pisar a fondo y crear un spot publicitario titulado Oh, Brother cuya duración es de algo más de 2 minutos.

Debido al argumento y la duración más bien se podría catalogar de un corto donde se cuenta la historia de una familia que adopta a un tierno e inofensivo monstruo que un buen día aparece en su hogar. Todo va bien hasta que el nuevo miembro de la familia va adquiriendo un tamaño gigantesco y se ven en la necesidad de dejarlo en casa en lugar de acompañarles como hacía habitualmente.

Al terminar el anuncio descubrimos el motivo de esta campaña publicitaria dejando buen sabor de boca debido al final feliz.

En mi opinión se trata de un anuncio que tendrá éxito, no es el clásico anuncio que vemos del coche circulando por la carretera con un guapo y trajeado conductor, aunque el producto está dirigido a adultos creo que el argumento y la música gustará a grandes y pequeños.

Quizás se haga un poco pesado si lo reproducen con demasiada frecuencia, es un error que suele cometerse.

¿Qué os parece a vosotros?